<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手风琴</title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="tools.js"></script>
    <script>
        var box = document.getElementById("box");
        var ul = box.children[0];
        var lis = ul.children;
        //循环遍历 给每一个li 绑定背景图片
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundImage = "url(http://7xvule.com1.z0.glb.clouddn.com/" + (i + 1) + ".jpg)";
            //给每一个里绑定 按钮排他事件
            lis[i].onmouseover = function () {
                //干掉所有人
                for (var j = 0; j < lis.length; j++) {
                    //让所有的li的宽度渐渐地变为100
                    animate(lis[j], { "width": 100 });
                }
                //留下我自己
                //让当前的li的宽度渐渐地变为800
                animate(this, { "width": 800 });
            }
            //鼠标离开后 让所有的li的宽度渐渐地变为240
            lis[i].onmouseout = function () {
                for (var k = 0; k < lis.length; k++) {
                    animate(lis[k], { "width": 240 });
                }
            }
        }

    </script>
    <script>
        /**
     * Created by jf on 2016/4/2.
     */

        function animate(obj, json) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var flag = true;
                //true表示所有属性的数值都到达目标了
                //先假设所有属性都到达目标了
                for (var k in json) {
                    //json {属性名：属性值} {k:json[k]}
                    var leader = parseInt(getStyle(obj, k)) || 0;
                    var target = json[k];
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    console.log("target: " + target + "leader: " + leader + "step: " + step);
                    obj.style[k] = leader + "px";
                    if (leader != target) {
                        flag = false;//告诉人家 我还有没到的呢
                    }
                }
                //最后再判断 如果标记仍然是true说明 没有没到达的了
                //也就是都到达了
                if (flag) {
                    clearInterval(obj.timer);
                }
            }, 15)
        }

        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return window.getComputedStyle(obj, null)[attr];
            }
        }
    </script>
</body>

</html>